﻿@page "/tables/column"

<h3>@ColumnLocalizer["Title"]</h3>

<h4>@ColumnLocalizer["H4"]</h4>

<DemoBlock Title="@ColumnLocalizer["ColumnTextTitle"]" Introduction="@ColumnLocalizer["ColumnTextIntro"]" Name="ColumnText">
    <p>@((MarkupString)ColumnLocalizer["ColumnTextDesc"].Value)</p>
    <Table TItem="Foo" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Text="@ColumnLocalizer["CustomColText1"]" Width="180" />
            <TableColumn @bind-Field="@context.Name" Text="@ColumnLocalizer["CustomColText2"]" />
            <TableColumn @bind-Field="@context.Address" Text="@ColumnLocalizer["CustomColText3"]" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["SelectTitle"]" Introduction="@ColumnLocalizer["SelectIntro"]" Name="Select">
    <Table TItem="Foo" Items="@Items.Take(3)" IsMultipleSelect="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["ShowCheckboxTitle"]" Introduction="@ColumnLocalizer["ShowCheckboxIntro"]" Name="ShowCheckbox">
    <Table TItem="Foo" Items="@Items.Take(3)" IsMultipleSelect="true" ShowCheckboxText="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["DisabledTitle"]" Introduction="@ColumnLocalizer["DisabledIntro"]" Name="Disabled">
    <Table TItem="Foo" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Complete">
                <Template Context="value">
                    <Checkbox Value="@value.Value" IsDisabled="true"></Checkbox>
                </Template>
            </TableColumn>
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["WidthTitle"]" Introduction="@ColumnLocalizer["WidthIntro"]" Name="Width">
    <p>@((MarkupString)ColumnLocalizer["WidthP1"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["WidthP1"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["WidthP3"].Value)</p>
    <Table TItem="Foo" @ref="TableRows"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowDefaultButtons="false" ShowSearch="false" IsMultipleSelect="true"
           ShowExtendButtons="true" ExtendButtonColumnWidth="240"
           OnQueryAsync="@OnQueryAsync">
        <TableToolbarTemplate>
            <TableToolbarButton TItem="Foo" Color="Color.Primary" Icon="fa fa-fw fa-edit" IsEnableWhenSelectedOneRow="true" Text="@ColumnLocalizer["WidthButtonText1"]" OnClickCallback="@CustomerButton" />
            <TableToolbarButton TItem="Foo" Color="Color.Success" Icon="fa fa-fw fa-edit" IsEnableWhenSelectedOneRow="true" Text="@ColumnLocalizer["WidthButtonText2"]" OnClickCallback="@CustomerButton" />
            <TableToolbarButton TItem="Foo" Color="Color.Warning" Icon="fa fa-fw fa-edit" IsEnableWhenSelectedOneRow="true" Text="@ColumnLocalizer["WidthButtonText3"]" OnClickCallback="@CustomerButton" />
            <TableToolbarButton TItem="Foo" Color="Color.Danger" Icon="fa fa-fw fa-edit" IsEnableWhenSelectedOneRow="true" Text="@ColumnLocalizer["WidthButtonText4"]" OnClickCallback="@CustomerButton" />
        </TableToolbarTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
        <RowButtonTemplate>
            <TableCellButton Color="Color.Primary" Icon="fa fa-edit" Text="@ColumnLocalizer["WidthButtonText1"]" OnClick="@(() => OnRowButtonClick(context, ColumnLocalizer["WidthButtonText1"]))" />
            <TableCellButton Color="Color.Success" Icon="fa fa-edit" Text="@ColumnLocalizer["WidthButtonText2"]" OnClick="@(() => OnRowButtonClick(context, ColumnLocalizer["WidthButtonText2"]))" />
            <TableCellButton Color="Color.Warning" Icon="fa fa-edit" Text="@ColumnLocalizer["WidthButtonText3"]" OnClick="@(() => OnRowButtonClick(context, ColumnLocalizer["WidthButtonText3"]))" />
            <TableCellButton Color="Color.Danger" Icon="fa fa-edit" Text="@ColumnLocalizer["WidthButtonText4"]" OnClick="@(() => OnRowButtonClick(context, ColumnLocalizer["WidthButtonText4"]))" />
            <TableCellPopconfirmButton Color="Color.Info" Icon="fa fa-edit" Text="" OnConfirm="@(() => OnRowButtonClick(context, ColumnLocalizer["WidthConfirmButtonText"]))" />
        </RowButtonTemplate>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["TableColumnTitle"]" Introduction="@ColumnLocalizer["TableColumnIntro"]" Name="TableColumn">
    <p>@((MarkupString)ColumnLocalizer["TableColumnP1"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["TableColumnP2"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["TableColumnP3"].Value)</p>
    <ul>
        <li>@((MarkupString)ColumnLocalizer["TableColumnli1"].Value)</li>
        <li>@((MarkupString)ColumnLocalizer["TableColumnli2"].Value)</li>
    </ul>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180">
                <Template Context="value">
                    @if (value.Row.Complete)
                    {
                        <div class="text-success">@value.Value</div>
                    }
                    else
                    {
                        <div class="text-danger">@value.Value</div>
                    }
                </Template>
            </TableColumn>
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Complete" Width="100">
                <Template Context="value">
                    <Checkbox Value="@value.Value" IsDisabled="true"></Checkbox>
                </Template>
            </TableColumn>
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["FormatterTitle"]" Introduction="@ColumnLocalizer["FormatterIntro"]" Name="Formatter">
    <p>@((MarkupString)ColumnLocalizer["FormatterP1"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["FormatterP2"].Value)</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" Formatter="@IntFormatter" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["AlignTitle"]" Introduction="@ColumnLocalizer["AlignIntro"]" Name="Align">
    <p>@((MarkupString)ColumnLocalizer["AlignP1"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["AlignP2"].Value)</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" Align="Alignment.Center" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" Formatter="@IntFormatter" Width="60" Align="Alignment.Right" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["ShownWithBreakPointTitle"]" Introduction="@ColumnLocalizer["ShownWithBreakPointIntro"]" Name="ShownWithBreakPoint">
    <p>@((MarkupString)ColumnLocalizer["ShownWithBreakPointP1"].Value)</p>
    <ul class="ul-demo mb-3">
        <li>@((MarkupString)ColumnLocalizer["ShownWithBreakPointLi1"].Value)</li>
        <li>@((MarkupString)ColumnLocalizer["ShownWithBreakPointLi2"].Value)</li>
        <li>@((MarkupString)ColumnLocalizer["ShownWithBreakPointLi3"].Value)</li>
        <li>@((MarkupString)ColumnLocalizer["ShownWithBreakPointLi4"].Value)</li>
        <li>@((MarkupString)ColumnLocalizer["ShownWithBreakPointLi5"].Value)</li>
    </ul>
    <p>@((MarkupString)ColumnLocalizer["ShownWithBreakPointP2"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["ShownWithBreakPointP3"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["ShownWithBreakPointP4"].Value)</p>
    <Table TItem="Foo" RenderMode="TableRenderMode.Table"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" Align="Alignment.Center" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" ShownWithBreakPoint="BreakPoint.Large" Formatter="@IntFormatter" Width="60" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["VisibleTitle"]" Introduction="@ColumnLocalizer["VisibleIntro"]" Name="Visible">
    <p>@((MarkupString)ColumnLocalizer["VisibleP1"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["VisibleP2"].Value)</p>
    <p>@((MarkupString)ColumnLocalizer["VisibleP3"].Value)</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowAddButton="false" ShowEditButton="false" ShowDeleteButton="false"
           ShowExtendButtons="false" ShowColumnList="true"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" Width="290" />
            <TableColumn @bind-Field="@context.Education" />
            <TableColumn @bind-Field="@context.Count" Visible="false" />
            <TableColumn @bind-Field="@context.Complete" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["AllowResizingTitle"]" Introduction="@ColumnLocalizer["AllowResizingIntro"]" Name="AllowResizing">
    <p>@((MarkupString)ColumnLocalizer["AllowResizingP1"].Value)</p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource" AllowResizing="true"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["TemplateTitle"]" Introduction="@ColumnLocalizer["TemplateIntro"]" Name="Template">
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="120" FormatString="yyyy-MM-dd" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
            <TableColumn @bind-Field="@context.Id" Text="">
                <Template Context="v">
                    <PopConfirmButton Text="Test" Size="Size.ExtraSmall" />
                </Template>
            </TableColumn>
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["AutoGenerateColumnsTitle"]" Introduction="@ColumnLocalizer["AutoGenerateColumnsIntro"]" Name="AutoGenerateColumns">
    <p>
        @((MarkupString)ColumnLocalizer["AutoGenerateColumnsP1"].Value)
        <ul class="ul-demo mb-3">
            <li>@((MarkupString)ColumnLocalizer["AutoGenerateColumnsLi1"].Value)</li>
            <li>@((MarkupString)ColumnLocalizer["AutoGenerateColumnsLi2"].Value)</li>
            <li>@((MarkupString)ColumnLocalizer["AutoGenerateColumnsLi3"].Value)</li>
        </ul>
        @((MarkupString)ColumnLocalizer["AutoGenerateColumnsP2"].Value)
    </p>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" AutoGenerateColumns="true"
           ShowToolbar="false" IsMultipleSelect="true" ShowExtendButtons="false"
           OnQueryAsync="@OnQueryAsync">
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["OnColumnCreatingTitle"]" Introduction="@ColumnLocalizer["OnColumnCreatingIntro"]" Name="OnColumnCreating">
    <Tips>
        <p>@((MarkupString)ColumnLocalizer["OnColumnCreatingP1"].Value)</p>
        <ol>
            <li>@ColumnLocalizer["OnColumnCreatingLi1"]</li>
            <li>@((MarkupString)ColumnLocalizer["OnColumnCreatingLi2"].Value)</li>
        </ol>
        <p>@((MarkupString)ColumnLocalizer["OnColumnCreatingP2"].Value)</p>
    </Tips>
    <Table TItem="Foo"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" AutoGenerateColumns="true"
           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
           ShowDefaultButtons="true" OnSaveAsync="@OnSaveAsync"
           OnQueryAsync="@OnQueryAsync" OnColumnCreating="@OnColumnCreating" ShowEditButton="true">
    </Table>
</DemoBlock>

<DemoBlock Title="@ColumnLocalizer["AdvanceTitle"]" Introduction="@ColumnLocalizer["AdvanceIntro"]" Name="Advance">
    <Table TItem="Foo" IsPagination="true" PageItemsSource="@PageItemsSource" RenderMode="TableRenderMode.Table"
           IsStriped="true" IsBordered="true" OnQueryAsync="OnQueryAsync">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="220">
                <Template Context="value">
                    <div class="d-flex">
                        <div>
                            <img src="@Foo.GetAvatarUrl(value.Row.Id)" class="bb-avatar" />
                        </div>
                        <div class="ps-2">
                            <div>@value.Value</div>
                            <div class="bb-sub">@value.Row.Address</div>
                        </div>
                    </div>
                </Template>
            </TableColumn>
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Education" Align="Alignment.Center" Width="80" />
            <TableColumn @bind-Field="@context.Count" Width="160">
                <Template Context="value">
                    <div class="w-100">
                        <div>@value.Value %</div>
                        <Progress Value="@value.Value" Color="@Foo.GetProgressColor(value.Value)"></Progress>
                    </div>
                </Template>
            </TableColumn>
            <TableColumn @bind-Field="@context.Complete" Align="Alignment.Center" Width="80" />
        </TableColumns>
    </Table>
</DemoBlock>
